import React  from 'react';
import { Input, Select, Button, Form } from 'antd';
import { inject, observer } from 'mobx-react';
import { ClearOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';


function Top({store}) {

  const formRef = React.createRef();

    return (
      <div>
        <div style={{ float: 'left', width: 800 }}>
          <Form ref={formRef} layout="inline">
            <Form.Item label='所属分类' name='categoryId'>
              <Select style={{ width: 200 }}>
                {store.categoryList.map(item => {
                  return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>;
                })}
              </Select>
            </Form.Item>
            <Form.Item label='参数名称' name='name'>
              <Input placeholder="参数名称" autoComplete="off" style={{ width: 200 }}/>
            </Form.Item>
            <Form.Item>
              <Button style={{ marginRight: 5 }} type="primary" htmlType="submit" icon={<SearchOutlined/>}
                      onClick={() => store.listCfgHandler(formRef.current.getFieldsValue())}>查询</Button>
              <Button onClick={() => formRef.current.resetFields()} icon={<ClearOutlined/>}>清空</Button>
            </Form.Item>
          </Form>
        </div>
        <Button style={{ float: 'right' }} type='primary' icon={<PlusOutlined/>} onClick={() => store.showCfgDialog()}>新增参数</Button>
      </div>
    );
}

export default inject('store')(observer(Top));
